iframe Search Using jquery [Case Study]

This article provides an example of how iframe uses jquery to find.Share it for your reference, as follows:

Question:

Today at the company, it's a function to add a "show or not" picture title to ckeditor

Difficulties:

Plug-ins have a lot of content and are quite powerful. They can not read and understand the logical relationship within a short time. Moreover, the modified content can not destroy the logical relationship within the plug-ins. Adding a function can not lead to more problems, so it can only solve the problem locally.

Breakthrough:

Knowing the html inserted with the iframe framework, the page has some initialization functions done here, so add this checkbox component here, and then look for the window object you want to work with based on the last window -- window.parent.document.body

jQuery (expression, [context]) - If an context parameter, such as an DOM element set or an jQuery object, is specified, it will be found in this context.

The following example is to add a component to the parent window of iframe

$('tr.cke_dialog_ui_hbox', parent.document.body).prepend('<td><input type="checkbox" id="show_img_title" class="cke_dialog_ui_hbox_first"> Photo caption description brought into the diary </td>');

You cannot access dynamically added components inside a closure because the contents of the closure are already running when the page is loaded, but the page has not yet added ID as an kkkk component. The value you get from using $("#kkkk") is empty, which does not achieve the desired purpose. Exceptions occur and script errors will be reported in the browser

How can I tell if jquery found a qualified object?

if(0==$(".check_show_img_title", parent.document.body).length){
   alert(" No objects found ");
}else{
  alert(" Yes "+$(".check_show_img_title", parent.document.body).length+" Component meets query criteria ");
}

Wise remark of an experienced person:

After dynamically adding components to the page, the normal initialization state is restored because the page is refreshed, but if it is a partial refresh, multiple components may be added, but if only one component is needed, the dynamically added components are deleted when leaving the page, and the problem arises, which may not be deleted in different browsers.This can be frustrating and cause browser compatibility problems. Now that's how you can think about it, add it in a certain state (add attributes in the tag), or you won't add it, so you don't have to delete the components you added, instead, it solves the browser compatibility problem

More readers interested in jQuery-related content can view this site's topics: jQuery Common Plug-ins and Usage Summary, Ajax Usage Summary in jquery, jQuery Table (table) Operation Skills Summary, jQuery Drag and Skills Summary, jQuery Extension Skills Summary, jQuery Common Classic Special Effects Summary, etc.jQuery Animation and Utility Summary and jquery Selector Usage Summary

I hope that the description in this paper will be helpful to everyone's jQuery program design.